<script setup lang="ts">
import { ref } from 'vue';
import useStore from "@/store";
import { storeToRefs } from "pinia";
const { main, user } = useStore();
const { id } = storeToRefs(user);
const { addTodos } = main;
const name = ref('');
function headerAdd() {
	addTodos(id.value, name.value);
	name.value = '';
}
</script>
<template>
	<header class="header">
		<input @keyup.enter="headerAdd()" v-model="name" class="new-todo" placeholder="按回车键添加新任务" autofocus />
	</header>
</template>

<style scoped lang="scss">
.new-todo {
	position: relative;
	margin: 0;
	width: 100%;
	font-size: 24px;
	font-family: inherit;
	font-weight: inherit;
	line-height: 1.4em;
	color: inherit;
	padding: 6px;
	border: 1px solid #999;
	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.new-todo {
	padding: 16px 16px 16px 60px;
	height: 65px;
	border: none;
	background: rgba(0, 0, 0, 0.003);
	box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}
</style>